<template>
    <div class="resultBox">
      <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="歌曲" name="1" />
          <el-tab-pane label="歌单" name="2" />
          <el-tab-pane label="歌手" name="3" />
          <el-tab-pane label="专辑" name="4" />
        </el-tabs>
      </div>

      <div v-if="activeName === '1'"> 
        <songlist :tableData="tableData"></songlist>
      </div>

      <div v-else-if="activeName === '2'"> 

      </div>
      <div class="box" v-else>
        没有开放
      </div>
    </div>
</template>
  
<script>
import songlist from '@/components/Front/SongList/index.vue'
import { mapState } from 'vuex'
export default {
    components:{
        songlist
    },
    data(){
        return{
            activeName:'1',
            tableData:[]
        }
    },
    methods:{
        handleClick(){
            console.log(this.activeName)
            this.getAll()
        },
        async getAll(){
            console.log(this.activeName)
            if(this.activeName == '1'){
                console.log(this.keyword)
                const res = await this.$axios.post(`Song/SelectByName?name=${this.keyword}`)
                console.log("\\\\ddddddddddddrs")
                console.log(res)
                this.tableData = res
            }
        }

    },
    computed:{
        ...mapState('search',['keyword']),
    },
    created(){
        this.getAll()
    }
}
</script>
  
<style scoped lang="less">

.resultBox {
    margin: 90px 130px 0 130px;
    padding: 20px 50px;
}
.box{
    height: 400px;
    width: 100%;
}
</style>
  